<template>
  <el-tabs lazy v-model="active" type="" @tab-click="handleClick">
    <el-tab-pane label="推荐的站点" name="rec">
      <this-content :list="list.rec" />
    </el-tab-pane>
    <el-tab-pane label="我管理的站点" name="my">
      <this-content :list="list.my" />
    </el-tab-pane>
    <el-tab-pane label="我关注的站点" name="follow">
      <this-content :list="list.follow" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import thisContent from "./tab-content.vue";

export default {
  components: { thisContent },
  data() {
    return {
      active: "rec",
      list: {
        rec: [
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "泰拉酒馆",
            link: "/sites/1",
          },
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "泰拉酒馆2",
            link: "/sites/2",
          },
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "泰拉酒馆3",
            link: "/sites/3",
          },
        ],
        my: [
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "我的站点1",
            link: "/sites/4",
          },
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "我的站点2",
            link: "/sites/5",
          },
        ],
        follow: [
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "关注站点1",
            link: "/sites/6",
          },
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "关注站点2",
            link: "/sites/7",
          },
          {
            img: require("@/assets/images/avatar.jpg"),
            title: "关注站点3",
            link: "/sites/8",
          },
        ],
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      //   console.log(tab, event);
    },
  },
};
</script>